<template>
	<view class="container">
		<view class="content">
			<view class="content-search d-rn d-ac">
				<image src="../../static/img/search.png" mode=""></image>
				<input type="text" :placeholder="$t('search_placeholder')" placeholder-style="#CCCCCC">
			</view>
		</view>
		<view class="orign d-rn d-ac d-jb" @click="handleGoOrign">
			<view class="orign-left d-rn d-ac">
				<image src="../../static/logo.png" mode=""></image>
				<text>{{ $t('organizational_structure') }}</text>
			</view>
			<view class="orign-right">
				<image src="../../static/img/right.png" mode=""></image>
			</view>
		</view>

		<view class="tong">
			<u-index-list :index-list="indexList">
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<view class="list-cell d-rn d-ac" v-for="(cell, index) in item" @click="handleAddNumber(cell)">
							<view class="list-cell-left">
								<image :src="cell.iconSts?'../../static/img/comfirm.png':'../../static/img/notConfirm.png'" mode=""></image>
							</view>
							<view class="list-cell-min">
								<image :src="cell.head" mode=""></image>
							</view>
							<view class="list-cell-right d-cw">
								<text>{{cell.name}}</text>
								<text>{{cell.zhiwu}}</text>
							</view>
						</view>
					</u-index-item>
				</template>
			</u-index-list>
			
		</view>


	</view>
</template>

<script>
	var _self
	import {employeeList} from '../../api/index.js'
	export default {
		data() {
			return {
				indexList: [],
				itemArr: [],
				
				// newArray:[
				// 	{
				// 		sign:'A',
				// 		children:[
				// 			{
				// 				name:'阿里巴巴',
				// 				iconSts:false,
				// 				zhiwu:'总经理',
				// 				head:'../../static/logo.png'
				// 			}
				// 		]
				// 	},
				// 	{
				// 		sign:'B',
				// 		children:[
				// 			{
				// 				name:'保定',
				// 				iconSts:false,
				// 				zhiwu:'总经理',
				// 				head:'../../static/logo.png'
				// 			},
				// 			{
				// 				name:'保鸡',
				// 				iconSts:false,
				// 				zhiwu:'总经理',
				// 				head:'../../static/logo.png'
				// 			}
				// 		]
				// 	},
				// 	{
				// 		sign:'C',
				// 		children:[
				// 			{
				// 				name:'长城',
				// 				iconSts:false,
				// 				zhiwu:'总经理',
				// 				head:'../../static/logo.png'
				// 			},
				// 			{
				// 				name:'常梓晨',
				// 				iconSts:false,
				// 				zhiwu:'总经理',
				// 				head:'../../static/logo.png'
				// 			},
				// 			{
				// 				name:'常陆琪',
				// 				iconSts:false,
				// 				zhiwu:'总经理',
				// 				head:'../../static/logo.png'
				// 			}
				// 		]
				// 	}
				// ],
				newArray:[
					{
						sign:'A',
						children:[
							{
								name:'阿里巴巴',
								iconSts:false,
								zhiwu:'总经理',
								head:'../../static/logo.png'
							}
						]
					},
					{
						sign:'B',
						children:[
							{
								name:'保定',
								iconSts:false,
								zhiwu:'总经理',
								head:'../../static/logo.png'
							},
							{
								name:'保鸡',
								iconSts:false,
								zhiwu:'总经理',
								head:'../../static/logo.png'
							}
						]
					},
					{
						sign:'C',
						children:[
							{
								name:'长城',
								iconSts:false,
								zhiwu:'总经理',
								head:'../../static/logo.png'
							},
							{
								name:'常梓晨',
								iconSts:false,
								zhiwu:'总经理',
								head:'../../static/logo.png'
							},
							{
								name:'常陆琪',
								iconSts:false,
								zhiwu:'总经理',
								head:'../../static/logo.png'
							}
						]
					}
				],
				title:'',
				
				
				
				
			}
		},
		onLoad(options) {
			_self = this;
			if(options && options.data){
				this.title = options.data
			}else{
				this.title = ''
			}
			_self.newArray.map((item,index)=>{
				_self.indexList.push(item.sign)
				_self.itemArr.push(item.children)
			})
			_self.getemployeeList()
		},
		methods: {
			getemployeeList(){
				employeeList().then(res=>{
					_self.newArray = res.rows
					_self.newArray.forEach(item=>{
						item.iconSts = false;
					})
				})
			},
			handleAddNumber(item){
				item.iconSts = !item.iconSts
				_self.$forceUpdate()
			},
			handleGoOrign(){
				_self.$commonFun.goUrl(1,'../organizationalStructure/index')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		width: 100%;

		.content {
			width: 100%;

			&-search {
				width: 94%;
				padding: 20rpx 35rpx;
				box-sizing: border-box;
				margin: 26rpx auto;
				border-radius: 2em;
				background-color: #ffffff;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				input {
					font-size: 26rpx;
					color: #cccccc;
				}
			}
		}

		.orign {
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #ffffff;

			&-left {
				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					font-size: 36rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 20rpx;
				}
			}

			&-right {
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		
		.tong{
			width: 100%;
			.list-cell{
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #EEEEEE;
				&-left{
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
				&-min{
					margin: 0 30rpx;
					image{
						width: 90rpx;
						height: 90rpx;
					}
				}
				&-right{
					text:nth-of-type(1){
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
					}
					text:nth-of-type(2){
						font-size: 28rpx;
						color: #666666;
						font-weight: bold;
					}
				}
			}
		}

	}
</style>